<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="top-fl">
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.communityname"
              placeholder="请输入发布小区"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.title"
              placeholder="请输公告主题"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.content"
              placeholder="请输入发布内容"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              style="margin-left: 20px"
              type="success"
              @click="onSubmit"
              size="medium"
              icon="el-icon-plus"
              >发布公告</el-button
            >
            <el-button
              style="margin-left: 20px"
              type="primary"
              @click="onSubmit2"
              size="medium"
              >重置</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="min">
      <el-tabs type="border-card">
        <el-tab-pane label="公告信息"
          ><el-table
            :data="tableData"
            style="width: 100%"
            :border="true"
            stripe
            v-loading="loading"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column label="公告主题" align="center" prop="title">
            </el-table-column>
            <el-table-column label="公告内容" align="center" prop="content">
            </el-table-column>
            <el-table-column
              label="发布时间"
              align="center"
              prop="createtime"
              :formatter="time"
              sortable
            >
            </el-table-column>
            <el-table-column
              label="小区名称"
              align="center"
              prop="communityname"
              min-width="40"
            >
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                  style="border-radius: 8px"
                  >归 档</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="opendialog(scope.$index, scope.row)"
                  icon="el-icon-zoom-in"
                  style="border-radius: 8px"
                  >查看公告</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagebox">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination></div
        ></el-tab-pane>
      </el-tabs>
    </div>
    <!-- ========================================= -->
    <el-dialog title="公告详情" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="form" label-width="100px">
        <div class="fomtop">
          <el-form-item label="小区名称：" style="width: 100%">
            <el-input
              readonly
              v-model="form.communityname"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布时间：" style="width: 100%">
            <el-date-picker
              readonly
              style="width: 100%"
              v-model="form.createtime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="公告主题：">
          <el-input readonly v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容：">
          <el-input readonly type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="公告状态：">
          <el-button>阅读量</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary"
          >取 消</el-button
        >
      </span>
    </el-dialog>
    <!-- ==================== -->
    <el-dialog title="公告内容不全" :visible.sync="dialogVisible2" width="30%">
      <span>请确保发布的公告内容是否填写完整</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
    <script>
import moment from "moment";
export default {
  data() {
    return {
      form: {},
      dialogVisible: false,
      dialogVisible2: false,
      loading: false,
      currentPage: 1, // 当前页码
      pagesize: 10, // 每页条数
      total: 0,
      formInline: {
        communityname: "",
        title: "",
        content: "",
      },
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索按钮
    async onSubmit() {
      console.log(this.formInline);
      if (
        this.formInline.communityname == "" ||
        this.formInline.title == "" ||
        this.formInline.content == ""
      ) {
        this.$alert('请确保发布的公告内容是否填写完整', '公告内容不全', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      } else {
        await this.$axios
          .post("/poster/addPoster", {
            ...this.formInline,
            token: sessionStorage.getItem("token"),
          })
          .then((res) => {
            this.$message({
              type: "success",
              message: "公告发布成功!",
            });
            this.getList();
          });
      }
    },
    // 重置按钮
    onSubmit2() {
      (this.formInline.communityname = ""),
        (this.formInline.title = ""),
        (this.formInline.content = "");
      this.getList();
    },
    // 数据接口
    // 表格数据
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/poster/getPosterData", {
          params: {
            pageNum: this.pagesize,
            currPage: this.currentPage - 1,
          },
        })
        .then((res) => {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.loading = false;
          // console.log(this.tableData);
        });
    },
    // 归档删除
    handleDelete(row, res) {
      // console.log(res.id);
      // console.log(sessionStorage.getItem('token'));
      this.$confirm("确定永久归档这条公告？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del(res.p_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消归档该公告",
          });
        });
    },
    async del(id) {
      await this.$axios
        .get("/poster/delPoster", {
          params: {
            p_id: id,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.$message({
            type: "success",
            message: "已成功归档该公告!",
          });
          this.getList();
        });
    },
    // 数据处理==================
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },
    time(a, b, c) {
      return moment(c).format("YYYY-MM-DD HH:mm:ss");
    },
    // 弹框查看
    opendialog(index, row) {
      this.dialogVisible = true;
      //   this.dialogData = row;
      console.log(row);
      this.form = row;
    },
  },
};
</script>
    <style scoped>
.top {
  width: 100%;
  overflow: hidden;
}
.top-fl {
  width: 100%;
  height: 40px;
  display: flex;
  /* justify-content: space-between;
      align-items: flex-start */
}
/* 使用深度选择器 */
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.min {
  width: 100%;
  margin-top: 10px;
}
.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
.fomtop {
  display: flex;
  justify-content: space-between;
}
.el-button--danger.is-plain,.el-button--danger{
  background-color: #F34C4A;
}
</style>